<template>
	<div class="wrap">
		<el-tabs v-model="activeName" class="demo-tabs">
			<el-tab-pane label="公告管理" name="first">
				<!-- 公告表 -->
				<NoticeTable :notice-data="noticeData" @mod="handleMod" />

				<!-- 分页 -->
				<el-row class="pagination">
					<el-pagination
						v-model:current-page="currentPage"
						v-model:page-size="pageSize"
						small="small"
						:background="true"
						layout="total, prev, pager, next"
						:total="total"
						@current-change="handleCurrentChange" />
				</el-row>
			</el-tab-pane>
			<el-tab-pane label="编辑公告" name="second">
				<CreateNotice />
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup>
import NoticeTable from '@/components/mod/NoticeTable.vue'
import CreateNotice from '@/components/mod/CreateNotice.vue'
import { getNoticeByHou } from '@/utils/axios/domiRequests'
import { onMounted, ref } from 'vue'
import { getNoticeOneBuild } from '@/utils/axios/getTotal'
import { useUserStore } from '@/stores/userStore'

const { userInfo } = useUserStore()
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

const activeName = ref('first')
const noticeData = ref([])

// 自定义事件
const handleMod = async () => {
	let { data } = await getNoticeByHou({ currentPage: currentPage.value, pageSize: pageSize.value })
	let res = await getNoticeOneBuild({ buildId: userInfo.buildId })
	total.value = res.data
	noticeData.value = data
}

const handleCurrentChange =async (val) => {
	let { data } = await getNoticeByHou({ currentPage: val, pageSize: pageSize.value })
	noticeData.value = data
}

onMounted(async () => {
	let { data } = await getNoticeByHou({ currentPage: currentPage.value, pageSize: pageSize.value })
	let res = await getNoticeOneBuild({ buildId: userInfo.buildId })
	total.value = res.data
	noticeData.value = data
})
</script>

<style scoped lang="sass">
.btn
  background: rgb(0,202,237)
  color: #ffff
.el-input
    width: 100px
.header
    margin-bottom: 20px

.el-tabs
    height: 500px
    &:deep(.el-tabs__content)
        height: 500px


.pagination
  position: absolute
</style>
